<template>
  <div class="app-container" style="margin-left: 50px; margin-right: 50px;">
    <!-- 搜索栏 -->
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="车牌号">
        <el-input
          v-model="queryParams.plateNum"
          placeholder="请输入车牌号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车牌颜色">
        <el-input
          v-model="queryParams.plateColor"
          placeholder="请输入车牌颜色"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table
      :data="vehicleList"
      v-loading="loading"
      border
      highlight-current-row
      style="width: 92%;"
    >
      <el-table-column label="编号" type="index" width="100" />
      <el-table-column label="车牌号" prop="plateNum" width="187" />
      <el-table-column label="车牌颜色" prop="plateColor" width="180" />
      <el-table-column label="方向" prop="direction" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.direction === 0 ? '驶入' : '驶出' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="停车场名称" prop="parkName" width="200" />
      <el-table-column label="用户名称" prop="userName" width="200" />
      <el-table-column label="创建时间" prop="createTime" width="200" />
      <el-table-column label="扫描图片" width="205" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 90px; height: 90px; object-fit: cover"
            :src="getFullImageUrl(scope.row.picture)"
            :preview-src-list="[getFullImageUrl(scope.row.picture)]"
            preview-teleported
            fit="cover"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 图片预览弹窗 -->
    <el-dialog
      :title="'图片预览'"
      :visible.sync="imageDialogVisible"
      width="60%"
    >
      <el-image :src="currentImage" fit="contain" />
      <template slot="footer">
        <el-button @click="imageDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { listByUser } from '@/api/system/carScan';

export default {
  data() {
    return {
      vehicleList: [],       // 车辆进出记录列表
      total: 0,              // 总记录数
      loading: false,        // 加载状态
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        plateNum: '',        // 车牌号
        plateColor: ''       // 车牌颜色
      },
      imageDialogVisible: false,  // 图片预览弹窗控制
      currentImage: '',          // 当前查看的图片
    };
  },
  methods: {
    // 获取完整图片URL
    getFullImageUrl(url) {
      if (!url) return ''; // 防止空值
      return process.env.VUE_APP_BASE_API + url;
    },

    // 获取车辆进出场记录列表
    async getList() {
      this.loading = true;
      try {
        const res = await listByUser(this.queryParams);
        this.vehicleList = res.rows;
        this.total = res.total;
      } catch (error) {
        this.$message.error('获取记录失败');
      } finally {
        this.loading = false;
      }
    },

    // 查询操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    // 重置查询条件
    resetQuery() {
      this.queryParams.plateNum = '';
      this.queryParams.plateColor = '';
      this.handleQuery();
    },

    // 图片预览
    previewImage(imageUrl) {
      this.currentImage = imageUrl;  // 设置当前图片URL
      this.imageDialogVisible = true; // 打开预览弹窗
    }
  },
  mounted() {
    this.getList(); // 初始化加载数据
  }
};
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background-color: #f2f2f2;
}
</style>
